<style lang="less" scoped>
</style>
<template>
    <div class="main">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/categories' }">分类管理</el-breadcrumb-item>

                <el-breadcrumb-item
                    v-for="item in categoryParents"
                    :key="item.id"
                    :to="{
                        path: '/categories',
                        query: {
                            parent_id: item.id
                        }
                    }"
                >{{item.name}}</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="main-menus">
                <el-button type="primary" icon="plus" @click="$router.push('/categories/0?parent_id=' + query.parent_id)">添加分类</el-button>
            </div>
        </div>
        <div class="main-filters">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-radio-group v-model="query.status">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button
                            v-for="(item, id) in statusAlias"
                            v-bind:key="id"
                            :label="id"
                        >{{item.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>

        <div class="main-actions">
            <div class="main-actions-label">
                满足搜索条件数据共<em>{{itemsData.pagination.total}}</em>条
                <span v-show="selectedItems.length">，当前选中<em>{{selectedItems.length}}条</em></span>
            </div>
            <div class="main-actions-btns">
                <!-- <el-button :disabled="!selectedItems.length" @click="repliedItems">批量标记回复</el-button>
                <el-button :disabled="!selectedItems.length" @click="ignoreItems">批量忽略</el-button> -->
            </div>
        </div>
        <el-table
            border
            element-loading-text="Loading..."
            v-loading.body="!itemsData.$resolved"
            :data="itemsData.items"
            @sort-change="onSortItems"
            @selection-change="onSelect"
        >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column sortable="custom" prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="分类名"></el-table-column>
            <el-table-column label="父级分类" sortable="custom" inline-template>
                <div class="time">
                    <p>{{row.parent.name || '-' }}</p>
                </div>
            </el-table-column>
            <el-table-column prop="status" label="状态" inline-template width="100" align="center">
                <StatusBox :item="row" :Model="ListModel"/>
            </el-table-column>
            <el-table-column prop="status" label="操作" inline-template>
                <div class="item-menus">
                    <el-button size="small" @click="showSubItems(row)">查看子级分类</el-button>
                    <el-button size="small" @click="editItem(row)">编辑</el-button>

                    <el-button @click="deleteItem(row)" size="small" type="danger">删除</el-button>
                </div>
            </el-table-column>
        </el-table>

        <el-pagination
            v-if="itemsData.$resolved"
            layout="prev, pager, next, jumper"
            :total="itemsData.pagination.total"
            :current-page="query.page_num"
            :page-size="query.page_size"
            @current-change="onPageChange"
        ></el-pagination>
    </div>
</template>

<script>
// import Promise from 'bluebird';
import CategoryModel from '../models/category';
import Templet from '../models/templet';
import Promise from 'bluebird';

import ListController from '../controllers/list';

export default new ListController({
    components: {
        StatusBox: require('../components/status-box')
    },
    data() {
        return {
            ListModel: CategoryModel,

            query: {
                page_num: 1,
                page_size: 20,
                with_parent: 1,
                parent_id: 0,
                with_count: 1,
                count_type: 'scene_id',
                status: 'all'
            },
            queryParsers: {
                page_size: parseInt,
                page_num: parseInt,

                parent_id: parseInt
            },
            statusMap: {
                OFFLINE: CategoryModel.OFFLINE,
                ONLINE: CategoryModel.ONLINE,
            },
            statusAlias: {
                [CategoryModel.OFFLINE]: {
                    icon: 'warning',
                    name: '已下架'
                },
                [CategoryModel.ONLINE]: {
                    icon: 'success',
                    name: '已上架'
                },
            },

            categoryParents: [],
        };
    },
    methods: {
        showSubItems(item) {
            this.query.parent_id = item.id;
        }
    }
});
</script>
